<template>
  <div class="sci-fi-container">
    <div class="search-panel">
      <el-input
        v-model="searchQuery"
        placeholder="请输入诗词关键词"
        class="glow-input"
        :disabled="true"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      
      <el-alert
        title="服务维护中"
        type="info"
        :closable="false"
        class="service-alert"
        description="诗词搜索服务升级中，预计2026年2月重新开放"
      />

      <el-button
        type="primary"
        class="glow-button"
        :disabled="true"
        @click="searchPoetry"
        v-loading="loading"
      >
        <span class="button-text">星际搜索</span>
      </el-button>
    </div>

    <div v-if="searchResults.length" class="result-grid">
      <el-card
        v-for="result in searchResults"
        :key="result.id"
        class="result-card"
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <el-icon class="poem-icon"><Notebook /></el-icon>
            <span class="poem-title">{{ result.title }}</span>
          </div>
        </template>
        <div class="poem-content">
          {{ result.author }}
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Notebook, Search } from '@element-plus/icons-vue';
import { searchAncientPoetry } from '@/api/crawler';

const searchQuery = ref('');
const searchResults = ref([]);
const loading = ref(false);

const searchPoetry = async () => {
  try {
    loading.value = true;
    // 调用搜索接口
  } catch (error) {
    // 错误处理
  } finally {
    loading.value = false;
  }

  try {
    const results = await searchAncientPoetry(searchQuery.value);
    searchResults.value = results;
  } catch (error) {
    console.error('搜索失败:', error);
  }
};
</script>

<style scoped lang="scss">
.sci-fi-container {
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(45deg, #0a1a2f, #1a365f);

  .search-panel {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    border-radius: 12px;
    background: rgba(18, 44, 77, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.1);
  }

  .glow-input {
    margin-bottom: 1.5rem;

    :deep(.el-input__inner) {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid #38bdf8;
      color: #bae6fd;
      font-size: 1.1rem;
      height: 50px;
      border-radius: 8px;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 0 15px rgba(56, 189, 248, 0.3);
      }
    }
  }

  .service-alert {
    margin: 1.5rem 0;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid #38bdf8;
    color: #bae6fd;

    :deep(.el-alert__title) {
      color: #7dd3fc;
      font-size: 1.1rem;
    }
  }

  .glow-button {
    width: 100%;
    height: 50px;
    background: linear-gradient(45deg, #38bdf8, #0284c7);
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    &::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      transform: rotate(45deg);
      animation: glow 3s infinite;
    }

    .button-text {
      position: relative;
      z-index: 1;
      letter-spacing: 1px;
    }

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(56, 189, 248, 0.4);
    }
  }

  .result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .result-card {
    background: rgba(18, 44, 77, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-radius: 10px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(56, 189, 248, 0.2);
    }

    .card-header {
      display: flex;
      align-items: center;
      color: #7dd3fc;

      .poem-icon {
        margin-right: 0.8rem;
        font-size: 1.2rem;
      }

      .poem-title {
        font-weight: 500;
      }
    }

    .poem-content {
      color: #bae6fd;
      line-height: 1.6;
    }
  }
}

@keyframes glow {
  0% { transform: rotate(45deg) translateX(-50%); }
  100% { transform: rotate(45deg) translateX(50%); }
}
</style>